<template>
  <div>
    <h2>医生管理</h2>


    <!-- 查询 -->
    <el-form ref="form" inline :model="form" label-width="80px">
      <div>
        <el-form-item label="所属机构">
          <el-select v-model="form.jgid" placeholder="请选择" clearable>
            <el-option   v-for="t in insList"   :key="t.id"   :label="t.name"   :value="t.id"   clearable  ></el-option> </el-select>
        </el-form-item>
        <el-form-item label="所属团队">
          <el-select v-model="form.tid" placeholder="请选择" clearable>
            <el-option    v-for="t in teamList"   :key="t.id"   :label="t.name"   :value="t.id"     clearable  ></el-option> </el-select>
        </el-form-item>
        <el-form-item label="医生标签">
          <el-select v-model="form.bid" placeholder="请选择" clearable>
            <el-option   v-for="t in lableList"  :key="t.id"  :label="t.name"    :value="t.id"   clearable ></el-option></el-select>
        </el-form-item>
      </div>
      <el-form-item>
        <el-input  v-model="form.doctorName" placeholder="请输入关键字(名字)"></el-input>
      </el-form-item>
      <div>
        <el-button type="primary" icon="el-icon-search" @click="findPage()">搜索</el-button>
        <el-button type="primary" plain style="float: right">导出</el-button>
        <el-button type="primary" style="float: right" @click="xz()"  >新增医生信息</el-button >
      </div>
    </el-form>
  

    <!-- 表 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 95%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="头像" width="120">
        <template slot-scope="scope">
          <div style="float: left; " >
            <img
              :src="scope.row.photo"
              style="width: 50px; height: 36px"/>
          </div>
          </template> </el-table-column>
      <el-table-column prop="id" label="编号" width="80"> </el-table-column>
      <el-table-column prop="doctorName" label="姓名" width="120px"></el-table-column>
      <el-table-column prop="phone" label="联系电话" width="120px"></el-table-column>
      <el-table-column  prop="rname" label="角色" width="120px">
        <template slot-scope="scope">
            <span style="color: red;">{{ scope.row.jname}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="iname" label="所属机构" width="150px"></el-table-column>
      <el-table-column prop="tname" label="所属团队" width="120px"></el-table-column>
    
      <el-table-column prop="status" label="状态" width="150px">
        <template slot-scope="scope">
            <el-tooltip :content="scope.row.status">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66" inactive-color="#ff4949"
              active-value="1" inactive-value="2" active-text="开启"  inactive-text="禁用"
              @change="updateStatus(scope.row.id,scope.row.status)">
            </el-switch>
          </el-tooltip>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column fixed="right" label="操作" width="190">
        <template slot-scope="scope">
             <el-link type="primary" @click="dd(scope.row)">查看详情</el-link>
             <span>&nbsp;&nbsp;</span>
             <el-link type="primary" @click="bj(scope.row)">编辑</el-link>
             <span>&nbsp;&nbsp;</span>
             <el-link type="danger" @click="sc(scope.row.id)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <!--  分页  -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pn"
      :page-sizes="[5, 9, 13, 15]"
      :page-size="ps"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

<!-- 详情 -->
<el-dialog title="医生信息" fullscreen="true" :visible.sync="dialogFormVisible">
 <div>
     <span style="margin-right: 120px;">医生编号：&nbsp;&nbsp;&nbsp;{{ xq.id }}</span>
     <span style="margin-right: 120px;">医生姓名：&nbsp;&nbsp;&nbsp;{{ xq.doctorName }}</span>
     <span style="margin-right: 120px;">医生头像：&nbsp;&nbsp;&nbsp;
         <img :src="xq.photo" style="width: 50px; height: 50px;" />
     </span>
     <span style="margin-right: 120px;">联系电话：&nbsp;&nbsp;&nbsp;{{ xq.phone }}</span>
 </div>
 <el-form ref="xq" :model="xq" label-width="90px">

    <el-form-item label="性别">
        <template slot-scope="scope">
          {{ scope.row.sex == 1 ? '男' : '女' }}
        </template>
    </el-form-item>
<!--  -->
    <br>
<el-form-item label="医生简介">
<span>{{ xq.intro }}</span>
</el-form-item>
<el-form-item label="医生擅长">
<span>{{ xq.shanchang }}</span>
</el-form-item>
<el-form-item label="加入团队">
    <span>{{ xq.iname }} </span>/
<span>{{ xq.tname }}</span>
</el-form-item>
<el-form-item label="签约人数">
<span>{{ xq.share }}</span>
</el-form-item>
<el-form-item label="医生评分">
<span>{{ xq.score }}</span>
</el-form-item>
<el-form-item label="创建时间">
<span>{{ xq.createTime }}</span>
</el-form-item>
<el-form-item label="创建人">
<span>{{ xq.uname }}</span>
</el-form-item>
<!--  -->
     <el-form-item label="账号状态：">
         <el-switch
 v-model="xq.status"
 active-color="#13ce66"
 inactive-color="#ff4949"
 active-value="1"
 inactive-value="2"
active-text="启用"  inactive-text="禁用"
 >
</el-switch>
     </el-form-item>
</el-form>
<div slot="footer"  class="dialog-footer" style="float: left;">
 <el-button @click="dialogFormVisible = false">返 回</el-button>
 <el-button type="primary" @click="bj(xq)">编辑医生信息</el-button>
 <el-button type="danger" @click="sc(xq.id)">删除</el-button>
</div>
</el-dialog>

<!-- saveOrUpdate -->

<el-dialog fullscreen="true" :title="pojo.id ? '编辑医生信息' : '新增医生信息'" :visible.sync="dialogFormVisible2">
  <el-form :model="pojo"  :inline="true">
    <div>
    <el-form-item label="医生姓名" >
      <el-input v-model="pojo.doctorName" style="width: 200px;"></el-input>
    </el-form-item>
    <el-form-item label="账号" >
      <el-input v-model="pojo.phone" placeholder="请输入有效手机号" style="width: 200px;"></el-input>
    </el-form-item>
        <!-- 图片上传 -->
        <el-form-item label="机构图片"  >
        <el-upload
            :show-file-list="false"
            :on-success="onUploadPosterSuccess"
            :before-upload="beforeUpload"
            :multiple="true"
            action="Http://localhost:8300/phl/doctor/uufile"
            list-type="picture-card">
          <img v-if="fileUrl" :src="pojo.photo" id="photo" style="width: 100px; height: 100px;">点击上传
        </el-upload>
      </el-form-item>
</div>
<div>
  <el-form-item label="性别">
    <el-select v-model="pojo.sex" placeholder="请选择" clearable>
      <el-option label="男" value="1"></el-option>
      <el-option label="女" value="2"></el-option>
    </el-select>
  </el-form-item>
    <el-form-item label="医生角色">
        <el-select v-model="pojo.jid" placeholder="请选择" clearable>
          <el-option  v-for="t in roleList" :key="t.id"  :label="t.name" :value="t.id" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择机构">
        <el-select v-model="pojo.jgid" placeholder="请选择" clearable @change="findteam(pojo.jgid)">
          <el-option  v-for="t in insList" :key="t.id"  :label="t.name" :value="t.id" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择团队">
        <el-select v-model="pojo.tid" placeholder="请先选择机构" clearable>
          <el-option  v-for="t in teaList" :key="t.id"  :label="t.name" :value="t.id" ></el-option>
        </el-select>
      </el-form-item>
</div>
<el-form-item label="医生简介">
    <el-input type="textarea" v-model="pojo.intro" ></el-input>
  </el-form-item>
  <el-form-item label="医生擅长">
    <el-input type="textarea" v-model="pojo.shanchang"></el-input>
  </el-form-item>


  </el-form>
  <div slot="footer" class="dialog-footer" style="float: left;">
    <el-button @click="dialogFormVisible2 = false">返 回</el-button>
    <el-button type="primary" @click="saveOrUpdate()">保 存</el-button>
  </div>
</el-dialog>


<el-button type="primary" @click="dddd()">测试</el-button>

  </div>
</template>

    <script>
import axios from "axios";
export default {
  data() {
    return {
      form: {},
      tableData: [],
      multipleSelection: [],
      vo: {},
      pn: 1,
      ps: 7,
      total: 0,
      insList: [],
      docList: [],
      teaList: [],
      teamList:[],
      lableList: [],
      dialogFormVisible:false,
      dialogFormVisible2:false,
      xq:{},
      pojo:{},
      fileUrl: null,
      roleList: [],
  //  用于修改时候拿到原来的团队id，去中间表查询
      middid:null,
      


    };
  },
  methods: {
    dddd(){
      axios.post('/doctor/dd')
    },
    //编辑
    bj(row){
      this.middid = row.tid;
        this.pojo = row;
        this.dialogFormVisible2 = true;
        console.log(JSON.stringify(row)+"-AAAAA-"+this.middid);
    },

  // saveOrUpdate
    saveOrUpdate(){
      console.log(JSON.stringify(this.pojo)+"SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS");
      if(this.middid == null){
        this.middid = 0;
      }
      const tid = this.middid;
      console.log(tid+"IIIIIIIIIIIIIIIIIIIIDDDDDDDDDDDDDDDDDDDDDDDD")
      if(this.pojo == null){
        this.$message({
          message: "必须添加数据",
          type: "error",
        });
      }else{
      axios.post(`doctor/saveOrUpdate/${tid}`, this.pojo).then((res) => {
        this.$message({
          message: "保存成功",
          type: "success",
          });
          this.dialogFormVisible2 = false;
          this.findPage();
          });
        }
    },

    // 拿到机构外键，去查机构有哪些团队
    findteam(id){
      // console.log(id+"jjjjjjjjjjjjjjjjjjjjjjj");
      axios.post(`team/findTid/${id}`).then((res) => {
        this.teaList = res.data.data;
        console.log(JSON.stringify(this.teaList)+"TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT");
        });
    },
    // 团队
    teamFind(){
      axios.post(`team/findTeam`).then((res) => {
        this.teamList = res.data.data;
        // console.log(JSON.stringify(this.teamList)+"");
        });
    },

    // 新增
    xz(){
        this.pojo = {};
        this.dialogFormVisible2 = true;
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isGIF = file.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG && !isPNG && !isGIF) {
        this.$message.error('上传头像图片只能是 JPG、PNG 或 GIF 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }
      return true
    },
      //  文件成功上传后的回调
      onUploadPosterSuccess(res) {
      console.log(res)
      this.pojo.photo=res.data;
      console.log(this.pojo.photo+"图片");
      this.fileUrl=true;
    },
    //详情
    dd(row){
        console.log(JSON.stringify(row)+"TTTTTTTTTTTTTTTTTTTTTTTTT");
        this.xq = row;
        this.dialogFormVisible = true;
    },
    //删除
    sc(id){
        console.log(id);
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            axios.post(`doctor/delete/${id}`).then((res) => {
            this.$message({
                message: "删除成功",
                type: "success",
            });
            this.findPage();
        });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },

    // 标签
    findLable() {
      axios.post("label/findLabel").then((res) => {
        this.lableList = res.data.data;
        // console.log(this.lableList);
      });
    },
    // 医生
    findDoctor() {
      axios.post("doctor/findDoctor").then((res) => {
        this.docList = res.data.data;
        // console.log(this.docList);
      });
    },

    //角色
    findRolee() {
        axios.post("role/findRole").then((res) => {
        this.roleList = res.data.data;
        // console.log(JSON.stringify(this.roleList)+"JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ")
        })
    },

    //查询机构
    findInstitution() {
      axios.post("institution/findName").then((res) => {
        this.insList = res.data.data;
        // console.log(this.insList);
      });
    },

    // 分页查询
    findPage() {
      try{
      axios
        .post(`doctor/findPage/${this.pn}/${this.ps}`, this.form)
        .then((res) => {
          this.tableData = res.data.data.doctorIPage.records;
          this.total = res.data.data.doctorIPage.total;
          console.table(JSON.stringify(res.data.data)+"yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy");
          const ss = res.data.data.str;
          if(ss != null){
             this.$notify({
               title: '啊啊啊',
               message: ss,
               duration: 0
           });
        }
          // console.log(JSON.stringify(this.tableData)+"fffffffffffffffffffffpppppppppppppppppppppppp");
        });
      }catch (error) {
        console.error('Error fetching data:', error);
        // 输出详细的错误信息
        console.error('Request config:', error.config);
        console.error('Request:', error.request);
        console.error('Response:', error.response);
      }
        
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.ps = val;
      this.findPage();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pn = val;
      this.findPage();
    },
    //多选框数组
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
  created() {
    this.teamFind();
    this.findPage();
    this.findInstitution();
    this.findDoctor();

    // this.findTeam();
    this.findLable();
    this.findRolee();
  },
};
</script>

<style scoped>

</style>